import React, { Component } from 'react';
import moment from "moment"
class Time extends Component {
    //声明状态
    state = {
        timeStr:"2023-03-29 09:06:30"
    }

    // 定时器
    intval = null;

    //componentDidMount  组件完成挂载时执行，只执行一次
    componentDidMount(){

        // console.log("componentDidMount  组件完成挂载时执行，只执行一次")
        //创建定时器
        this.intval = setInterval(() => {
            //更新状态
            this.setState({
                timeStr:moment().format("YYYY-MM-DD HH:mm:ss")
            })

            // console.log("这是定时器");
        }, 1000);
    }

    //componentWillUnmount 组件将要卸载时
    componentWillUnmount(){
        // console.log("componentWillUnmount 组件将要卸载时");
        //清除定时器
        clearInterval(this.intval);
    }


    //componentDidUpdate  组件完成更新时
    componentDidUpdate(){
        // console.log("componentDidUpdate  组件完成更新时");
    }

   
    render() {
       
    //    console.log("这是render方法.执行了");
        return (
            <div style={{width:500,height:100,border:"1px solid red",fontSize:30,textAlign:"center"}}>
               {this.state.timeStr}
            </div>
        );
    }
}

export default Time;